<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/my-css.css" />
    <script type="text/javascript" src="/js/my-js.js" ></script>
    <script type="text/javascript" src="/js/jquery.cookie.js" ></script>
    <script type="text/javascript" src="/js/vue.min.js" ></script>
    <title>Java学习网</title>
    <style type="text/css">
        .center {
            margin-top: 10px;
            position: relative;
            left: 50%;
            width: 560px;
            text-align: center;
            transform: translateX(-50%);
            border-radius: 20px;
            background-color: white;
            padding: 10px 15px 30px 15px;
        }
        .message-text {
            color: red;
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <script type="text/javascript">moralLoad("#header", "/html/header.html")</script>
    <div class="container">
        <div class="row center panel panel-default" id="user-form">
            <h3 style="margin-bottom: 25px;"><b>学生注册</b></h3><hr />
            <form class="form-horizontal content" id="registerForm">
                <div class="form-group">
                    <label for="account" class="col-xs-2 control-label">
                                                                      账号
                    </label>
                    <div class="col-xs-5">
                        <input type="text" class="form-control" id="account" name="account" required="required" placeholder="长度必须为6-20位">
                    </div>
                    <label for="account" class="col-xs-4 control-label" style="padding-left: 0;">
                        <span class="pull-left text-danger">* 必填</span>
                        <span id="accountMessage" class="pull-right message-text"></span>
                    </label>
                </div>
                <div class="form-group">
                    <label for="password" class="col-xs-2 control-label">
                                                                        密码
                    </label>
                    <div class="col-xs-5">
                        <input type="password" class="form-control" id="password" name="password" required="required" placeholder="长度必须为6-20位">
                    </div>
                    <label for="password" class="col-xs-4 control-label" style="padding-left: 0;">
                        <span class="pull-left text-danger">* 必填</span>
                        <span id="passwordMessage" class="pull-right message-text"></span>
                    </label>
                </div>
                <div class="form-group">
                    <label for="repassword" class="col-xs-2 control-label">
                                                                         重复密码
                    </label>
                    <div class="col-xs-5">
                        <input type="password" class="form-control" id="repassword" name="repassword" required="required" placeholder="长度必须为6-20位">
                    </div>
                    <label for="repassword" class="col-xs-4 control-label" style="padding-left: 0;">
                        <span class="pull-left text-danger">* 必填</span>
                        <span id="repasswordMessage" class="pull-right message-text"></span>
                    </label>
                </div>
                <div class="form-group">
                    <label for="name" class="col-xs-2 control-label">
                                                                    昵称
                    </label>
                    <div class="col-xs-5">
                        <input type="text" class="form-control" id="name" name="name" required="required" placeholder="长度必须为2-24位">
                    </div>
                    <label for="name" class="col-xs-4 control-label" style="padding-left: 0;">
                        <span class="pull-left text-danger">* 必填</span>
                        <span id="nameMessage" class="pull-right message-text"></span>
                    </label>
                </div>
                <div class="form-group">
                    <label class="col-xs-2 control-label">
                                                                        性别
                    </label>
                    <div id="gender" class="col-xs-5 checkbox-inline">
                        <input type="radio" class="checkbox-inline" value="男" name="gender" required="required">男
                        &emsp;&emsp;
                        <input type="radio" class="checkbox-inline" value="女" name="gender">女
                    </div>
                    <label class="col-xs-4 control-label" style="padding-left: 0;">
                        <span class="pull-left text-danger">* 必选</span>
                    </label>
                </div>
                <div class="form-group">
                    <label for="captcha" class="col-xs-2 control-label">
                                                                        验证码
                    </label>
                    <div class="col-xs-3">
                        <input type="text" class="form-control" id="captcha" name="captcha" required="required">
                    </div>
                    <div class="col-xs-2" title="点击刷新验证码" onclick="updateCaptcha()" style="cursor:pointer; padding: 0 0 0 0;">
                        <img id="captchaImg" src="/captcha" alt="验证码图片">
                    </div>
                    <label for="captcha" class="col-xs-4 control-label" style="padding-left: 0;">
                        <span class="pull-left text-danger">* 必填</span>
                        <span id="captchaMessage" class="pull-right message-text"></span>
                    </label>
                </div>
                <div style="margin: 15px 0 15px 0;">
                    <p id="message" class="text-danger" style="visibility: hidden;">!</p>
                </div>
                <div class="col-xs-offset-2 col-xs-8 input-group">
                    <button type="submit" class="pull-left col-xs-4 btn btn-warning">
                                                                            注册
                    </button>
                    <button class="pull-right col-xs-4 btn btn-primary" onclick="window.history.back();">
                                                                    返回
                    </button>
                </div>
            </form>
        </div>
    </div>
</body>
<script type="text/javascript">
    var isPasswordCorrect, isRepasswordCorrect, isNameCorrect, isCaptchaCorrect;
    var inputCaptcha = $("#captcha");
    $("#account").blur(function() {
        var account = $(this).val();
        if (checkLength(account, 6, 20)) {
            $.get("/users", {account: account}, function(data) {
                $("#accountMessage").text(data.message);
            }, 'json');
        } else {
            $("#accountMessage").text("长度必须为6-20位");
            isAccountCorrect = false;
        }
    });
    $("#password").blur(function() {
        if (checkLength($(this).val(), 6, 20)) {
            $("#passwordMessage").text("");
            isPasswordCorrect = true;
        } else {
            $("#passwordMessage").text("长度必须为6-20位");
            isPasswordCorrect = false;
        }
    });
    $("#repassword").blur(function() {
        if ($(this).val() === $("#password").val()) {
            $("#repasswordMessage").text("");
            isRepasswordCorrect = true;
        } else {
            $("#repasswordMessage").text("两次输入的密码不同");
            isRepasswordCorrect = false;
        }
    });
    $("#name").blur(function() {
        if (checkLength($(this).val(), 2, 24)) {
            $("#nameMessage").text("");
            isNameCorrect = true;
        } else {
            $("#nameMessage").text("长度必须为2-24位");
            isNameCorrect = false;
        }
    });
    $("#captcha").blur(function() {
        if (checkLength($(this).val(), 4, 4)) {
            $("#captchaMessage").text("");
            isCaptchaCorrect = true;
        } else {
            $("#captchaMessage").text("长度必须为4位");
            isCaptchaCorrect = false;
        }
    });
    $("#registerForm").submit(function() {
        if (isPasswordCorrect && isRepasswordCorrect && isNameCorrect && isCaptchaCorrect) {
            var data = {
                account: $("#account").val(),
                password: $("#password").val(),
                repassword: $("#repassword").val(),
                name: $("#name").val(),
                gender: $("input[name='gender']:checked").val(),
                captcha: $("#captcha").val()
            };
            myAjax({
            	type: 'post',
            	url: '/users',
            	data: data,
            	success: function(data) {
                    $.cookie('userName', data.userName, {expires: 7});
                    showMessage("注册成功！即将跳转");
                    setTimeout("window.location.href = '/showCourseCategory.html';", 500);
                }
            }, refresh);
        }
        return false;
    });
    function refresh() {
        inputCaptcha.val("");
        updateCaptcha();
    };
</script>
</html>